<template>
  <Teleport to="#message">
    <div class="alert  fixed-top w-50 mx-auto d-flex justify-content-between mt-2" :class="classObject" role="alert" v-if="isVisible">
      <strong>{{ message }}</strong>
      <button type="button" class="close" aria-label="Close" @click="hide">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </Teleport>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";
import useDOMCreate from '../hook/useDOMCreate'
export type MessageType = "success" | "error" | "default";
export default defineComponent({
  props: {
    type: {
      type: String as PropType<MessageType>,
      default: "default",
    },
    message: String,
  },
  //   emits:['close-message'],
  setup(props, context) {
    // const node = document.createElement("div");
    // node.id = "message";
    // document.body.appendChild(node);
    useDOMCreate('message')
    const isVisible = ref(true);
    const classObject = {
      "alert-success": props.type === "success",
      "alert-danger": props.type === "error",
      "alert-primary": props.type === "default",
    };
    
    const hide = () => {
      isVisible.value = false;
      // context.emit('close-message',true)
    };
    return {
      isVisible,
      classObject,
      hide,
    };
  },
});
</script>

<style scoped></style>
